<template>
  <div class="search-form divClass" v-if="headerShow">
    <a-form size="small" :model="pageData" layout="inline">
      <a-form-item label="车间">
        <a-select v-model="pageData.workshopId" style="width: 200px" class="bacClass" allow-clear>
          <a-option :value="1">染部A</a-option>
          <a-option :value="2">染部B</a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="机台类型">
        <a-select
          v-model="pageData.machineTypeId"
          class="bacClass"
          @search="handleSearch"
          @focus="handleSearch"
          allow-search
          allow-clear
          style="width: 200px"
        >
          <a-option v-for="item in pageData.typeList" :value="item.id" :key="item.typeName">
            {{ item.typeName }}
          </a-option>
        </a-select>
      </a-form-item>
    </a-form>
    <Toolbar :items="['查询']" @select="doRefresh()"></Toolbar>
  </div>
  <div class="my-divisders">
    <a-divider orientation="center">
      <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
      <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
    </a-divider>
  </div>
  <div class="cssTable">
    <a-spin
      :loading="pageData.pageLoading"
      tip="加载中"
      dot
      style="height: 100%; width: 100%; z-index: 999"
    >
      <AgGridVuesCopys
        :rowHeight="33"
        :headerHeight="33"
        :suppressCopyRowsToClipboard="true"
        :style="{ height: pageData.rHeight - 150 + 'px' }"
        :suppressDragLeaveHidesColumns="true"
        rowSelection="multiple"
        @grid-ready="gridReady"
        :defaultColDef="defaultColDef"
        class="ag-theme-alpine"
        :rowData="pageData.tableList"
        :columnDefs="tableColumns"
        :localeText="localeText1"
      >
      </AgGridVuesCopys>
    </a-spin>
  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { post, get } from '@/api/http'
import { Message, Modal } from '@arco-design/web-vue'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'

const headerShow = ref<boolean>(true)
const localeText1: any = ref(localeText)
const pageData: any = reactive({
  tableList: [],
  pageLoading: false,
  workshopId: null,
  machineTypeId: null,
  typeList: [],
})

const defaultColDef: any = {
  sortable: true,
  resizable: true,
  filter: true,
}
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
  colState.value = params.columnApi
}

let tableColumns: any = [{ headerName: '生产要求', field: 'colorName', width: 100 }]

//查询
function doRefresh() {
  pageData.pageLoading = true
  post({
    url: 'aps/dwMachineColor/findMachineColorList',
    data: {
      workshopId: pageData.workshopId,
      machineTypeId: pageData.machineTypeId,
    },
  })
    .then(({ data, code }: any) => {
      if (code === 200) {
        pageData.tableList = data
        if (data[0].machineCodes.length > 0) {
          let newColumn = data[0].machineCodes.map((item: any) => {
            return {
              headerName: item.machineCode,
              field: item.machineCode,
              width: 100,
              cellRenderer: {
                template: `<div style="color:black;font-weight: bold;font-size: 18px;" @dblclick="CheckCancel">{{ isMachineCodeExist ? '√' : '&nbsp;' }}</div>`,
                setup(props: any) {
                  let isMachineCodeExist = false
                  if (props.params.data.colorMachineList) {
                    isMachineCodeExist = props.params.data.colorMachineList.some(
                      (colorItem: any) => colorItem.machineCode === item.machineCode
                    )
                  } else {
                    isMachineCodeExist = false
                  }

                  //修改颜色类型
                  const CheckCancel = () => {
                    post({
                      url: 'aps/dwMachineColor/updateMachineColor',
                      data: {
                        colorCode: props.params.data.colorCode,
                        colorName: props.params.data.colorName,
                        machineCode: item.machineCode,
                        workshopId: item.workshopId,
                        checked: isMachineCodeExist ? 0 : 1,
                      },
                    }).then(({ code, message }) => {
                      if (code == 200) {
                        doRefresh()
                      } else {
                        Message.error(message)
                      }
                    })
                  }
                  return {
                    isMachineCodeExist,
                    CheckCancel,
                  }
                },
              },
            }
          })
          gridOption.value.setColumnDefs([...tableColumns, ...newColumn])
        } else {
          gridOption.value.setColumnDefs([...tableColumns])
        }
      }
    })
    .catch()
    .finally(() => {
      pageData.pageLoading = false
    })
}

//机台类型下拉
const handleSearch = () => {
  post({
    url: 'aps/dwMachineType/getMachineTypePage',
    data: {
      page: 1,
      size: 100000,
      // typeName: pageData.machineTypeName,
    },
  }).then((res: any) => {
    if (res.code === 200) {
      pageData.typeList = res.data.list
    }
  })
}

onMounted(() => {
  pageData.rHeight = document.getElementsByClassName('main-section')[0]?.clientHeight
  //弹出层的高
  if (pageData.rHeight !== undefined) {
    pageData.rHeight = pageData.rHeight
  }
  handleSearch()
  doRefresh()
})
</script>
<style lang='less' scoped>
:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>